<template>
 <mt-tabbar v-model="message" fixed >
    <mt-tab-item id="index">
      <img slot="icon" src="../assets/img/首页.png">
      主页
    </mt-tab-item>
    <mt-tab-item id="ShopList">
      <img slot="icon" src="../assets/img/分类.png">
      分类
    </mt-tab-item>
    <mt-tab-item id="ShoppingCart">
      <img slot="icon" src="../assets/img/_购物车.png">
      购物车
    </mt-tab-item>
    <mt-tab-item id="MyHome">
      <img slot="icon" src="../assets/img/我的.png">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>
<script>
export default {
  data(){
    return{
    //选中的tabbar值message为外面页面传入的值selected
      message:this.selected,
    //这里使用的icon图标为图片，所以需要加图片改变的传入，若使用阿里图标，则不用加
    }
  },
  props:{
    selected: String,
  },
  watch: {
    message: function (val){
      // 这里就可以通过 val 的值变更来确定去向
      switch(val){
        case 'index':
          this.$router.push('/');
        break;
        case 'ShopList':
          this.$router.push('/ShopList');
        break;
        case 'ShoppingCart':
          this.$router.push('/ShoppingCart');
        break;
        case 'MyHome':
          this.$router.push('/MyHome');
        break;
      }
    }
  },
}
</script>